<script setup>
import { ref, provide, onMounted } from 'vue'
import { RouterView } from 'vue-router'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useConfigStore } from '@/stores/config'

import SideNav from '@/components/common/SidebarMenus.vue'
import BottomNav from '@/components/common/BottomMenus.vue'

import ThemeButton from '@/components/common/ThemeButton.vue'
import UserButton from '@/components/user/UserButton.vue'
import NoticeButton from '@/components/common/NoticeButton.vue'

const configStore = useConfigStore()
const showLogo = ref(true)

const menus = ref([
  {
    name: 'chat',
    title: '对话',
    icon: 'comments',
  },
  {
    name: 'assistant',
    title: '助手',
    icon: 'pen-alt',
  },
  {
    name: 'visrole',
    title: '角色',
    icon: 'hat-wizard',
  },
  {
    name: 'user',
    title: '我的',
    icon: 'user-tie',
  },
])

//是否小页面（小屏幕，手机屏幕）
const isSmallPage = ref(window.innerWidth < 768)

onMounted(async () => {
  //加载配置信息
  await configStore.init()
})

window.addEventListener('resize', () => {
  isSmallPage.value = window.innerWidth < 768
})

provide('showLogo', showLogo)
provide('menus', menus)
provide('isSmallPage', isSmallPage)
</script>

<template>
  <el-config-provider :locale="zhCn">
    <el-container class="w-screen h-screen">
      <el-header
        v-if="showLogo"
        height="60px"
        class="flex justify-between items-center px-4 border-b-[1px] border-[--el-border-color] bg-[var(--el-bg-color)]"
      >
        <RouterLink class="flex items-center" :to="{ name: 'chatIndex' }">
          <img src="@/assets/logo.svg" alt="Logo" class="h-8 mr-2" />
          <span>磨锋AIGC</span>
        </RouterLink>
        <div class="flex items-center space-x-1.5">
          <ThemeButton />
          <NoticeButton v-if="isSmallPage" />
          <UserButton />
        </div>
      </el-header>
      <el-container class="overflow-hidden">
        <el-aside width="80px" v-if="!isSmallPage">
          <div class="relative z-30 h-full">
            <SideNav />
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <RouterView />
          </el-main>
          <el-footer v-if="isSmallPage" height="64px">
            <!-- 底部菜单 -->
            <div class="relative z-50">
              <BottomNav />
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </el-config-provider>
</template>

<style scoped>
.el-main,
.el-aside,
.el-aside {
  padding: 0;
}
</style>
